<template>
  <!-- 复制文本 -->
  <div class="hu-copy-text" @click="copyText">
    <svg-icon class="hu-copy-icon" iconClass="copy" />复制内容
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "HuCopyText",
  props: {
    // 需要复制的文本所在的 html元素 的 id名称
    getIds: {
      type: String,
      default: "",
    },
  },
  methods: {
    copyText() {
      window.getSelection().removeAllRanges();
      let selection = window.getSelection();
      let range = document.createRange();
      range.selectNodeContents(document.getElementById(this.getIds));
      selection.addRange(range);
      let copy = document.execCommand("Copy");
      if (copy) {
        Toast("复制成功");
      } else {
        Toast("无复制权限，复制失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/less/color";
.hu-copy-text {
  font-size: 13px;
  display: flex;
  align-items: center;
  color: @blue;
  .hu-copy-icon {
    font-size: 20px;
  }
}
// 供父组件使用，用于定位“复制文本”的位置
.hu-copy {
  position: relative;
  .hu-copy-tag {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
